<template>
  <a-modal title="动态表单配置" :width="720" :visible="visible" @ok="handleModalConfirm" @cancel="handleModalCancel"
    :confirm-loading="modalLoading">
    <a-card title="身份信息" :bordered="true" style="margin-bottom: 20px;">
      <div style="margin-bottom: 20px;">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
          全选
        </a-checkbox>
      </div>
      <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
    </a-card>
    <a-card title="资产情况" :bordered="true" style="margin-bottom: 20px;">
      <div style="margin-bottom: 20px;">
        <a-checkbox :indeterminate="indeterminate1" :checked="checkAll1" @change="onCheckAllChange1">
          全选
        </a-checkbox>
      </div>
      <a-checkbox-group v-model="checkedList1" :options="plainOptions1" @change="onChange1" />
    </a-card>
    <a-card title="完善信息" :bordered="true">
      <div style="margin-bottom: 20px;">
        <a-checkbox :indeterminate="indeterminate2" :checked="checkAll2" @change="onCheckAllChange2">
          全选
        </a-checkbox>
      </div>
      <a-checkbox-group v-model="checkedList2" :options="plainOptions2" @change="onChange2" />
    </a-card>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/channel';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    channelId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      modalLoading: false,
      formList: [],
      checkAll: false,
      indeterminate: true,
      checkedList: [],
      plainOptions: [],
      checkAll1: false,
      indeterminate1: true,
      checkedList1: [],
      plainOptions1: [],
      checkAll2: false,
      indeterminate2: true,
      checkedList2: [],
      plainOptions2: [],
      list1: [],
      list2: [],
      list3: [],
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        // this.handleModalCancel();
      } else {
        const params = {
          channelId: this.channelId,
        };
        Ajax.getConfigChannelList(params).then(({ success, data }) => {
          if (success) {
            this.formList = data;
            this.list1 = data.find((it) => it.packageType === 1).elementContentVO;
            this.plainOptions = this.list1.map((it) => it.labelName);
            this.checkedList = this.list1.filter((it) => it.choose === 1).map((it) => it.labelName);
            this.onChange(this.checkedList);
            this.list2 = data.find((it) => it.packageType === 2).elementContentVO;
            this.plainOptions1 = this.list2.map((it) => it.labelName);
            this.checkedList1 = this.list2.filter((it) => it.choose === 1).map((it) => it.labelName);
            this.onChange1(this.checkedList1);
            this.list3 = data.find((it) => it.packageType === 3).elementContentVO;
            this.plainOptions2 = this.list3.map((it) => it.labelName);
            this.checkedList2 = this.list3.filter((it) => it.choose === 1).map((it) => it.labelName);
            this.onChange2(this.checkedList2);
          }
        });
      }
    },
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.checkAll = checkedList.length === this.plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    onChange1(checkedList) {
      this.indeterminate1 = !!checkedList.length && checkedList.length < this.plainOptions1.length;
      this.checkAll1 = checkedList.length === this.plainOptions1.length;
    },
    onCheckAllChange1(e) {
      Object.assign(this, {
        checkedList1: e.target.checked ? this.plainOptions1 : [],
        indeterminate1: false,
        checkAll1: e.target.checked,
      });
    },
    onChange2(checkedList) {
      this.indeterminate2 = !!checkedList.length && checkedList.length < this.plainOptions2.length;
      this.checkAll2 = checkedList.length === this.plainOptions2.length;
    },
    onCheckAllChange2(e) {
      Object.assign(this, {
        checkedList2: e.target.checked ? this.plainOptions2 : [],
        indeterminate2: false,
        checkAll2: e.target.checked,
      });
    },
    handleModalConfirm() {
      const names = [this.list1, this.list2, this.list3].flat();
      const checkedNames = [this.checkedList, this.checkedList1, this.checkedList2].flat().filter((it) => it);
      const ids = [];
      checkedNames.forEach((item) => {
        const id = names.find((it) => it.labelName === item).elementId;
        ids.push(id);
      });
      this.modalLoading = true;
      const params = {
        channelId: this.channelId,
        elementIdList: ids,
      };
      Ajax.configChannelList(params).then(({ success }) => {
        if (success) {
          this.$message.success('保存成功');
          this.$emit('success');
          this.handleModalCancel();
        }
      }).finally(() => {
        this.modalLoading = false;
      });
    },
    handleModalCancel() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
